<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
</body>
<script>

  const event = {
    msg: {},
    add(type, cb){
      if(this.msg[type]){
        this.msg[type].push(cb);
      }else{
        this.msg[type] = [cb];
      }
    },
    remove(type, cb){
      if(!this.msg[type]) return;
      const i = this.msg[type].indexOf(cb);
      if(i !== -1) this.msg[type].splice(i, 1);
    },
    emit(type){
      if(!this.msg[type]) return;
      this.msg[type].forEach(val=>{
        val();
      })
    }
  }
  
  // 绑定发布者和观察者的关系
  event.add("abc", fn1);
  event.add("abc", fn2);
  event.add("abc", fn3);
  event.add("abc", fn4);

  // 接触发布者和观察者的关系
  // event.remove("abc", fn3);

  // 发布信息
  event.emit("abc");
  

  function fn1(){
    console.log("fn1")
  }
  function fn2(){
    console.log("fn2")
  }
  function fn3(){
    console.log("fn3")
  }
  function fn4(){
    console.log("fn4")
  }
  
</script>
</html>